<template>
	<BreadCrumb ref="breadcrumb" :item="item"></BreadCrumb>
	<div class="table-wrapped">
		<div class="table-top">
			<div class="table-header">
				<div class="search-wrapped">
					<el-input
					      v-model="input1"
					      style="width: 240px"
					      size="large"
					      placeholder="请输入账号进行查询"
					      :prefix-icon="Search"
					    />
				</div>
				<div class="button-wrapped">
					<el-button type="primary" @click="createFn(2)">添加用户管理员</el-button>
				</div>
			</div>
			<div class="table-content">
				<el-table :data="tableData" style="width: 100%" border>
					<el-table-column prop="index"  width="50" />
					<el-table-column prop="account" label="账号" />
				    <el-table-column prop="name" label="姓名" />
					<el-table-column prop="sex" label="性别" />
				    <el-table-column prop="department" label="部门"  />
				    <el-table-column prop="email" label="邮箱"  />
				    <el-table-column prop="" label="操作" >
						<template #default="{row}">
							<div>
								<el-button type="warning" @click="editFn(row)">编辑</el-button>
								<el-popconfirm title="Are you sure to delete this?" @confirm="confrimDelete(row)">
								    <template #reference>
								      <el-button type="danger">删除</el-button>
								    </template>
								</el-popconfirm>
							</div>
						</template>
					</el-table-column>
				  </el-table>
			</div>
		</div>
		<div class="table-footer">
			<el-pagination background layout="prev, pager, next" :total="1000" :page-size="100" :size="size"/>
		</div>
	</div>
	<CreateAdmin ref="createRef"  @success="getList"/>
	<EditAdmin ref="editRef" @success="getList"/>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
import BreadCrumb from "@/components/bread_crumb.vue"
import CreateAdmin from "../components/create_admin.vue"
import {bus} from "@/utils/mitt.js"
import EditAdmin from "../components/edit_admin.vue"
	import { getAdminList, deleteUser } from "@/api/userInfo.js"
	import { ElMessage } from "element-plus";
	const item = ref({
	    first: "用户管理",
	    secound: "用户管理员"
	})
	const input1 = ref('')
	const tableData = ref([])
	const createRef = ref();
	const createFn = (key) =>{
		bus.emit("editorTitle", key)
		createRef.value.open()
	}
	const editRef = ref()
	const editFn = (row) => {
		bus.emit("editorData", row)
		editRef.value.open()
	}
	const getList = async() => {
		const res = await getAdminList({identity: "用户管理员"});
		console.log(res,'9999999')
		tableData.value = res.data.data || []
	}
	getList()
	const confrimDelete = async(row) => {
		const res = await deleteUser({id: row.id})
		if (res.data.code === 0) {
			ElMessage({
			    message: res.data.msg,
			    type: "success"
			})
			getList()
		} else {
			ElMessage.error(res.data.msg);
		}
	}
</script>

<style lang="scss" scoped>
	.table-wrapped {
		padding: 8px;
		height: calc(100vh - 101px);
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.table-top {
			.table-header {
				padding: 0 24px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 48px;
				background: #fff;
				.search-wrapped {
					:deep(.el-input__wrapper) {
						height: 32px;
						padding: 0 15px;
					}
				}
				.button-wrapped {
					
				}
			}
			.table-content {
				
			}
		}
		.table-footer {
			display: flex;
			justify-content: flex-end;
		}
	}
</style>